<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/1 0001
  Time: 下午 4:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>照片评选</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/toupiao.css">
    <style>
       /* .btn{
           background-color: #76838f;
        }*/
    </style>
</head>
<body>
    <div class="container" style="display: none">
        <p class="title">${vote.title}</p>
        <input type="hidden" id="voteId" value="${vote.id}">
        <div class="banner" style="background: url(/dl/img?path=${vote.banner}) no-repeat;background-size: cover"></div>
        <%--<img style="width: 1000px; height: 100px" class="layui-upload-img" id="demo1" src="/dl/img?path=${vote.banner}">--%>

        <div class="info">
            <p>投票开始时间：<fmt:formatDate  value="${vote.startTime}" pattern="yyyy年MM月dd日 HH:mm:ss"/></p>
            <p>投票截止时间：<fmt:formatDate  value="${vote.endTime}" pattern="yyyy年MM月dd日 HH:mm:ss"/></p>
            <p style="font-size: 22px;color: red">规则：每人每日限投一票，每票限投一人</p>
            <input type="hidden" id="status" value="${status}">
            <input type="hidden" id="flag" value="${flag}">
        </div>

        <ul id="fall-wrap" style="height: 600px">
            <c:forEach items="${voteItems}" var="item">
                <li class="box">
                    <a href="javascript:">
                        <img src="/dl/img?path=${item.img}" alt="">
                        <p class="user">${item.name}</p>
                        <p class="like"><span>${item.votes}</span>票</p>
                        <input type="hidden"  value="${item.id}">
                        <input type="button" value="投票" class="btn">
                    </a>
                </li>
            </c:forEach>
        </ul>

    </div>
    <script src="/static/plugins/jquery.js"></script>
    <%--<script src="/static/plugins/layui/layui.js"></script>--%>


    <script src="/static/plugins/layer_mobile/layer.js"></script>

    <script src="/static/plugins/masonry/js/masonry-docs.js"></script>

    <script>

       $(function () {

           var $container = $('#fall-wrap');
           $container.imagesLoaded(function() {
               $container.masonry({
                   itemSelector: '.box',
                   gutter: 5,
                   isAnimated: true
               });
           });

           if(!$("#status").val()){
               $(".container").show()
           }else{
               layer.open({
                   content:"投票未发布",
                   skin:'msg',
                   time:2,

               })
           }

           if($("#flag").val()=="true"){

               /*$(".btn").prop("disabled","disabled");*/
               $(".btn").css("background","#76838f");
           }




           $(".btn").on('click',function () {
               var $this = $(this)
               var itemId = $this.prev().val()

               var votes = $this.parent().find('span').text()

               var voteId = $("#voteId").val()

               $.ajax({
                   url:"/voteitem/updateVotes",
                   type:"post",
                   dataType:"json",
                   data:{voteId:voteId,itemId:itemId},
                   success:function (rs) {
                        layer.open({
                        content:rs.message,
                        skin:'msg',
                        time:2,

                        })
                       if(rs.code==1){

                          /* $(".btn").prop("disabled","disabled");*/
                           $(".btn").css("background","#76838f");

                           /*$this.parent().find('span').text(rs.data)*/
                           $this.parent().find('span').text(Number(votes)+1)
                       }
                   },
                   error:function () {

                       layer.open({
                        content:'服务器错误',
                        skin:'msg',
                        time:2,
                        })

                   }
               })
           })

       })









    </script>
</body>
</html>
